<template>
  <div class="systemConfig">
    <el-form
      ref="baseFormRef"
      :model="baseForm"
      :rules="rules"
      label-width="140px"
    >
      <el-row :gutter="20" style="margin-top: 15px">
        <el-col :span="12">
          <el-form-item label="人员信息">
            <user-select
              v-model="serviceAlertUserIds"
              placeholder="请选择人员信息"
              multiple
            />
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item>
            <el-button
              type="primary"
              size="small"
              class="saveBtn"
              :loading="btnLoading"
              @click="submitForm('ServiceAlertUsersConfig')"
              >保 存</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import {
  getConfigListByCategory,
  updateSystemConfig,
} from "@/api/system/sysConfig";
export default {
  name: "SysConfigServiceAlertUsersSetting",
  props: {},
  data() {
    return {
      btnLoading: false,
      serviceAlertUserIds: [],
      baseForm: {},
      rules: {},
    };
  },
  watch: {},
  computed: {
    ServiceAlertUsersConfig() {
      return {
        category: "ServiceAlertUsersConfig",
        list: [
          {
            name: "服务器资源告警信息接收人员",
            key: "ServiceAlertUsers",
            value: JSON.stringify(this.serviceAlertUserIds),
          },
        ],
      };
    },
  },
  methods: {
    initData() {
      getConfigListByCategory("ServiceAlertUsersConfig")
        .then((res) => {
          for (let i = 0; i < res.data.length; i++) {
            this.serviceAlertUserIds = JSON.parse(res.data[i].keyValue);
          }
        })
        .catch(() => {});
    },

    /**保存 */
    submitForm(category) {
      this.btnLoading = true;
      console.log("category", category);
      // 基础设置
      if (category == "ServiceAlertUsersConfig") {
        updateSystemConfig(this.ServiceAlertUsersConfig)
          .then((res) => {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 1500,
              onClose: () => {
                this.btnLoading = false;
              },
            });
          })
          .catch(() => {
            this.btnLoading = false;
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.systemConfig {
  padding: 0;

  .saveBtn {
    width: 100px;
  }
}
</style>
